<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="250" height="200" style="border:1px dashed gray"></canvas>
</body>

</html>
<script>
    let cns = document.querySelector('#canvas');
    let context = cns.getContext('2d');
    let r = 250,
        g = 0,
        b = 0;

    for (let i = 0; i < 125; i++) {

        if (i < 25) {
            g += 10;
        } else if (i >= 25 && i < 50) {
            r -= 10;
        } else if (i >= 50 && i < 75) {
            b += 10;
        } else if (i >= 75 && i < 100) {
            g -= 10;
        } else {
            r += 10;
        }

        context.fillStyle=`rgb(${r},${g},${b})`;
        context.fillRect(i*2, 0, 2, cns.height);
        

    }
</script>